<template>
	<view class="wrap">
		<form @submit="submit">
			<view class="top">
				<view class="item">
					<view class="left">会员昵称</view>
					<input name='nickname' type="text" v-model="nickname" placeholder="请输入会员昵称">
				</view>
				<view class="item">
					<view class="left">会员头像</view>
					<!-- u-upload UI视图组件 文件上传 
					previewFullImage 是否可以预览图片
					最大选择图片的数量  最大数量的选择
					multiple	是否开启图片多选，部分安卓机型不支持
					deletable	是否显示删除图片的按钮
					fileList	显示已上传的文件列表
					previewImage	是否在上传完成后展示预览图
					afterRead	读取后的处理函数
					beforeRead	读取前的处理函数
					delete	删除图片
					-->
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3"
						:previewFullImage="true"></u-upload>
				</view>
				<view class="item">
					<view class="left">会员性别</view>
					<view class="right">
						<u-radio-group v-model="sex" @change="sexChange">
							<u-radio v-for="(item, index) in sexlist" :key="item.value" :label="item.name"
								:name="item.value">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="item" @click="showbirthday">
					<view class="left">会员生日</view>
					<!-- 数据的回显 -->
					<input type="text" disabled placeholder="会员生日" v-model="birthday" name='birthday'>
					<!-- 会员生日的选择器 -->
					<u-datetime-picker @cancel='cancel' @confirm='confirm' :show="birthdayShow" mode="date">
					</u-datetime-picker>
				</view>
				<view class="item" @click="regionVisible=true">
					<view class="left">所在地址</view>
					<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" name="region"
						v-model="region" />
				</view>
			</view>
			<!-- @confirm   
			 自定义事件名称
			 当我们触发comfirm 会触发子传父
			 子组件会把把用户选择的三列给到父组件
			 -->
			<regionPicker :visible.sync="regionVisible" mode="region" default-type="value" :hide-area="false"
				@confirm="onConfirm($event,'region')" ref="region"></regionPicker>
			<button form-type="submit" type="warn">保存并使用</button>
			<button form-type="reset">重置</button>
		</form>

	</view>
</template>

<script>
	//引入基础地址
	import baseUrl from "@/request/baseUrl.js"
	//页面一加载获取接口
	import {
		getUserinfo,
		infoedit
	} from '@/request/app.js'
	// 引入地区模块
	import regionPicker from "@/components/region/w-picker.vue";
	export default {
		components: {
			regionPicker
		},
		data() {
			return {
				//文件上传的列表  如果有数据代表的是图片回显
				fileList: [],
				id: '', //初始化修改数据id
				regionVisible: false, //初始化地区选择器开关
				nickname: '', //初始化收件人姓名
				region: '', //初始化地区默认值
				birthday: "",
				birthdayShow: false,
				sexlist: [{
						value: 1,
						name: '男'
					},
					{
						value: 2,
						name: '女'
					},
				],
				sex: 1 //初始化会员性别
			}
		},

		onLoad() {
			//封装一个获取信息的接口
			getUserinfo({
					uid: uni.getStorageSync('userInfo').uid
				})
				.then(res => {
					console.log(res, '信息返回');
					let userinfo = res.data.list[0]
					this.nickname = userinfo.nickname
					this.fileList = [{
						url: baseUrl + userinfo.avatarurl
					}]
					this.sex = userinfo.sex
					this.birthday = userinfo.birthday
					this.region = userinfo.region
					// console.log(this.fileList );
					this.id = userinfo.id
				})
		},

		methods: {
			//图片上传后触发的事件
			afterRead(e) {
				console.log(e, '事件对象');
				//图片的回显
				this.fileList = [{
					url: e.file.thumb
				}]
			},
			// 传递index 回调 event 参数 包含index，file，name
			deletePic(e) {
				console.log(e, '事件对象-删除');
				this.fileList = []
			},
			//性别标签的切换
			sexChange(e) {
				console.log(e, '性别的选择');
			},
			//显示生日日期
			showbirthday() {
				//打开事件选择器
				this.birthdayShow = true
			},
			//确定选择器触发的事件
			confirm(e) {
				this.birthday = this.formateTime(e.value)
				console.log(this.birthday, '会员生日');
				//关闭选择器
				this.birthdayShow = false
			},
			//关闭日期选择器
			cancel() {
				this.birthdayShow = false
			},
			// 选择会员地区
			onConfirm(res) {
				console.log(res, '子组件传递的用户选中的子组件结果');
				this.region = res.result
			},
			//时间转化方法
			formateTime(timer) {
				let date = new Date(timer)
				let year = date.getFullYear()
				let month = ((date.getMonth() + 1) + '').padStart(2, '0')
				let day = (date.getDate() + '').padStart(2, '0')
				return `${year}-${month}-${day}`
			},
			//封装一个保存事件
			submit(e) {
				let user = {}
				user = {
					id: this.id,
					sex: this.sex,
					avatarurl: this.fileList[0].url,
					...e.detail.value
				}
				infoedit(user)
					.then(res => {
						console.log(res, '修改成功');
					})
			}
		}
	}
</script>


<style lang="scss">
	/deep/ .line {
		color: $u-light-color;
		font-size: 28rpx;
	}

	.wrap {
		background-color: #f2f2f2;

		.top {
			background-color: #ffffff;
			border-top: solid 2rpx $u-border-color;
			padding: 22rpx;

			.item {
				display: flex;
				font-size: 32rpx;
				line-height: 100rpx;
				align-items: center;
				border-bottom: solid 2rpx $u-border-color;

				.left {
					width: 180rpx;
				}

				input {
					text-align: left;
				}
			}

			.address {
				padding: 20rpx 0;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}
			}

			.site-clipboard {
				padding-right: 40rpx;

				textarea {
					// width: 100%;
					height: 150rpx;
					background-color: #f7f7f7;
					line-height: 60rpx;
					margin: 40rpx auto;
					padding: 20rpx;
				}

				.clipboard {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					color: $u-tips-color;
					height: 80rpx;

					.icon {
						margin-top: 6rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.bottom {
			margin-top: 20rpx;
			padding: 40rpx;
			padding-right: 0;
			background-color: #ffffff;
			font-size: 28rpx;

			.tag {
				display: flex;

				.left {
					width: 160rpx;
				}

				.right {
					display: flex;
					flex-wrap: wrap;

					.tags {
						width: 140rpx;
						padding: 16rpx 8rpx;
						border: solid 2rpx $u-border-color;
						text-align: center;
						border-radius: 50rpx;
						margin: 0 10rpx 20rpx;
						display: flex;
						font-size: 28rpx;
						align-items: center;
						justify-content: center;
						color: $u-content-color;
						line-height: 1;
					}

					.plus {
						//padding: 10rpx 0;
					}
				}
			}

			.default {
				margin-top: 50rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: solid 2rpx $u-border-color;
				line-height: 64rpx;

				.tips {
					font-size: 24rpx;
				}

				.right {}
			}
		}
	}
</style>
